/**
 * Created by xxx on 2017年11月9日.
 */
/**
 * 表单组件
 * @type {*}
 */
var Table = React.createClass({
    render: function () {
        return (
            <tr>
                <td style={{width: '10%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '20%'}}>{this.props.trData.mdtid}</td>
                <td style={{width: '20%'}}>{this.props.trData.typeName}</td>
                <td style={{width: '15%'}}>{this.props.trData.devicePrice}</td>
                <td style={{width: '15%'}}>{this.props.trData.packagePrice=='-1'?<span>----</span>:this.props.trData.packagePrice}</td>
                <td style={{width: '20%'}}>
                    <div className='trButton trLeft clickDliver' onClick={this.props.onClickEdit}>修改</div>
                    <div className='trButton trLeft trLong table-delete' onClick={this.props.onClickDelete}>恢复默认</div>
                </td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            tableData:[
                {
                    id: '1',
                    typeName:'智能学生证',
                    devicePrice: 0,
                    packagePrice: 0,
                    mdtid: '',
                }
            ],
            selectData: {},
        }
    },
    componentDidMount: function () {
        suixun.hideLoding();//显示加载中
        var svar = this;
        //绑定回车时间
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($(".enterEvent").is(":focus")){
                    var queryVal= $("#query").val();
                    if(queryVal == ''){
                        suixun.alert('请输入正确格式的IMEI号！');
                        return;
                    }else if(queryVal.length==14&&!/^[1-9]\d*$/.test(queryVal)){
                        suixun.alert('请输入正确格式的IMEI号！');
                        return;
                    }
                    svar.getDevicePrice(queryVal);
                }
            }
        });
    },
    /**
     * 更具IMEI获取设备信息
     */
    getDevicePrice: function (mdtid) {
        var svar = this;
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/devicePriceManage/getDevicePrice?mdtid='+mdtid,'',"get",function(data){//index:"'+this.state.bannerMenu+'",
            suixun.hideLoding(500);//显示加载中
            if(data.code == 200){
                if(data.info){
                    var typeName = '智能学生证';
                    svar.state.tableData[0].packagePrice = data.info.packagePrice;
                    if(data.info.mdtid.substring(0,4)=='8888'){
                        typeName = '13.56考勤卡';
                        svar.state.tableData[0].packagePrice = -1;
                    }else if(data.info.mdtid.substring(0,4)=='9999'){
                        typeName = '2.4G考勤卡';
                        svar.state.tableData[0].packagePrice = -1;
                    }
                    svar.state.tableData[0].typeName = typeName;
                    svar.state.tableData[0].devicePrice = data.info.devicePrice;
                    svar.state.tableData[0].mdtid = data.info.mdtid;
                    svar.setState({tableData:svar.state.tableData});
                }else{
                    svar.setState({tableData:[]});
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 显示修改价格页面
     * @param info
     * @returns {XML}
     */
    onClickEdit: function (info) {
        this.setState({selectData:info});
        $(".popModel").show();
    },
    /**
     * 设置价格
     */
    setDevicePrice: function () {
        var svar = this;
        // var price = $('#price').val();//硬件价格
        var packagePrice = $('#packagePrice').val();//硬件套餐价格
        // if(price==''&&packagePrice==''){
        //     suixun.alert('套餐价格、硬件价格不能同时为空！');
        //     return;
        // }
        // if(price!=''){
        //     if(!this.judgePrice(price)){
        //         suixun.alert('请输入正确的硬件价格！');
        //         return;
        //     }
        // }
        if(packagePrice==''){
            suixun.alert('套餐价格不能为空！');
            return;
        }else if(!this.judgePrice(packagePrice)){
            suixun.alert('请输入正确的套餐价格！');
            return;
        }

        var data = new FormData();
        data.append("mdtid",this.state.selectData.mdtid);
        // if(price != ''){
        //     data.append("devicePrice",price);
        // }
        data.append("packagePrice",packagePrice);
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/devicePriceManage/saveDevicePackagePrice',data,"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        svar.getDevicePrice($("#query").val());
                        svar.onClickHidePop();
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 关闭修改价格弹出框
     */
    onClickHidePop: function () {
        $(".popModel").hide();
        $(".errorMsg").hide();
        $('#packagePrice').val('');//套餐价格
    },
    /**
     * 验证金额
     * @param e
     */
    onChangePrice: function (e) {
        if(this.judgePrice(e.target.value)||e.target.value==''){
            $("."+e.target.getAttribute('data-error')+"").hide();
        }else{
            $("."+e.target.getAttribute('data-error')+"").show();
        }
    },
    /**
     * 价格验证
     * @param value
     * @return boolean
     */
    judgePrice: function (value) {
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if(!reg.test(value)){
            return false;
        }else{
            return true;
        }
    },
    /**
     * 恢复默认价格
     * @param info
     */
    onClickDelete: function (info) {
        var svar = this;
        suixun.confirm_noTit('确定该设备恢复默认',function (data) {
            if(data){
                var data = new FormData();
                data.append("mdtid",info.mdtid);
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/devicePriceManage/deleteDevicePackagePrice',data,"post",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!',function (data) {
                            if(data){
                                svar.getDevicePrice($("#query").val());
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 点击搜索
     */
    onClickQuery: function () {
        var queryVal= $("#query").val();
        if(queryVal == ''){
            suixun.alert('请输入正确格式的IMEI号！');
            return;
        }else if(queryVal.length==14&&!/^[1-9]\d*$/.test(queryVal)){
            suixun.alert('请输入正确格式的IMEI号！');
            return;
        }
        this.getDevicePrice(queryVal)
    },
    render: function () {
        {
            var svar = this;
            var onClickArray = [this.onClickEdit,this.onClickDelete];
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <Table key={data.bannerId} onClickEdit={onClickArray[0].bind(svar,data)} onClickDelete={onClickArray[1].bind(svar,data)} listNumber={index} trData={data}/>
                )
            })
        }
        return (
            <div className="tableManage-body devicePrice">
                <div  className="popPhone popModel">
                    <div className="model"></div>
                    <div className="popModel-info">
                        <div className="popModel-title">
                            <span className="popModel-title-content">
                                <span className="popModel-title-content-solid-left"/>
                                    修改设备价格
                                <span className="popModel-title-content-solid-right"/>
                            </span>
                            <span className="popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                        </div>
                        <div className="popModel-body">
                            <div className="popModel-body-imei">
                                <span className="popModel-body-imei-title">设备IMEI</span>
                                <span className="popModel-body-imei-content">{this.state.selectData.mdtid}</span>
                            </div>
                            {/*<div className="popModel-body-phone popModel-body-input">*/}
                                {/*<span className="popModel-body-phone-title popModel-body-input-title noImg">硬件价格</span>*/}
                                {/*<span className="popModel-body-phone-id popModel-body-input-id" style={{display:'none'}}/>*/}
                                {/*<span className="popModel-body-phone-content popModel-body-input-content">*/}
                                    {/*<input className="phone-content input-content " id="price" type="text" maxLength='20' data-error="changePrice"  placeholder="请输入要修改的金额" onChange={this.onChangePrice} />*/}
                                {/*</span>*/}
                                {/*<div className="errorMsg changePrice" />*/}
                            {/*</div>*/}
                            <div className="popModel-body-phone popModel-body-input">
                                <span className="popModel-body-phone-title popModel-body-input-title ">套餐价格</span>
                                <span className="popModel-body-phone-id popModel-body-input-id" style={{display:'none'}}/>
                                <span className="popModel-body-phone-content popModel-body-input-content">
                                    <input className="phone-content input-content " id="packagePrice" type="text" data-error="changePackagePrice" maxLength='20' placeholder="请输入要修改的金额" onChange={this.onChangePrice} />
                                </span>
                                <div className="errorMsg changePackagePrice" />
                            </div>
                        </div>
                        <div className="popModel-button">
                            <span className="popModel-button-ok" onClick={this.setDevicePrice}>确定</span>
                        </div>
                    </div>
                </div>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">
                            <a href="./getSystemPrice.html" className="header-left-button menu-width  ">默认价格</a>
                            <a href="./schoolPrice.html" className="header-left-button ">学校价格</a>
                            <a href="./devicePrice.html" className="header-left-button showOrder">设备价格</a>
                        </div>
                        <div className="header-left-annotationsInfo">
                            <img src="../img/icon/annotations.png" />
                            <span className="header-left-annotations-arrowsLeft"/>
                            <div className="header-left-annotations">这里是注释。</div>
                        </div>
                    </div>
                    <div className="header-right">
                        <div className="header-right-query">
                            <div className="header-right-query-input">
                                <input className="queryVal enterEvent" type="text" id="query" maxLength="14" placeholder="请输入设备IMEI号"/>
                            </div>
                            <div className="header-right-query-img" onClick={this.onClickQuery}></div>
                        </div>
                    </div>
                </header>
                <div className="tableInfo">
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                    <th style={{width: '10%'}}>序号</th>
                                    <th style={{width: '20%'}}>设备IMEI号</th>
                                    <th style={{width: '20%'}}>设备类型</th>
                                    <th style={{width: '15%'}}>硬件价格</th>
                                    <th style={{width: '15%'}}>套餐价格</th>
                                    <th style={{width: '20%'}}>操作</th>
                                </thead>
                                <tbody>
                                {this.state.tableData[0].mdtid==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData[0].mdtid==""?<div className="tableNoData">请输入IMEI号搜索</div>:''}
                        </div>
                    </div>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);